﻿@page "/linear-gauge/data-sample"

@using Syncfusion.Blazor.LinearGauge

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample illustrates exercise tracking of an athlete by using ranges, pointers, and annotation features available in linear gauge. </p>
</SampleDescription>
<ActionDescription>
   <p>This sample demonstrates the exercise tracking using ranges, pointer and annotation features in linear gauge. We have rendered 3 linear gauges in this sample for indicating running, cycling and walking.</p>
</ActionDescription>

<div class="control-section">
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="300px">
        <LinearGaugeContainer Width="30" Offset="30">
            <LinearGaugeContainerBorder Width="0"/>
        </LinearGaugeContainer>
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Offset="30" />
                <LinearGaugeAxisLabelStyle Offset="50" />
                <LinearGaugePointers>
                    <LinearGaugePointer Value="10" Height="10" Width="10" Placement="Placement.Near" Offset="-60" MarkerType="MarkerType.Triangle" />
                </LinearGaugePointers>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="0.1" End="10" StartWidth="30" EndWidth="30" Color="#30b32d" />
                </LinearGaugeRanges>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
        <LinearGaugeAnnotations>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="10" X="-180" Y="-180" ZIndex="1">
                <ContentTemplate>
                    <div id="title" style="width:300px;">
                        <img class="annotation" src="images/linear-gauge/exercise-tracking.png"/>
                        <p style="font-size:18px;color:#4285F4;float:left;margin-left:12px;margin-top:4px">Exercise Tracking </p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="0" X="-100" Y="-130" ZIndex="1">
                <ContentTemplate>
                    <div style="width:100px;">
                        <img class="annotation" src="images/linear-gauge/running.svg"/>
                        <p class="annotationTemplate">Running</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="10" Y="-65" ZIndex="1">
                <ContentTemplate>
                    <div style="width:60px;">
                        <p class="annotationText">10 MPH</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
        </LinearGaugeAnnotations>
    </SfLinearGauge>
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="250px">
        <LinearGaugeContainer Width="30" Offset="-50">
            <LinearGaugeContainerBorder Width="0"/>
        </LinearGaugeContainer>
        <LinearGaugeAxes>
            <LinearGaugeAxis>
                <LinearGaugeLine Offset="30" />
                <LinearGaugeAxisLabelStyle Offset="50" />
                <LinearGaugePointers>
                    <LinearGaugePointer Value="28" Height="10" Width="10" Placement="Placement.Near" Offset="-60" MarkerType="MarkerType.Triangle" />
                </LinearGaugePointers>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="0.1" End="28" StartWidth="30" EndWidth="30" Color="#30b32d" />
                </LinearGaugeRanges>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
        <LinearGaugeAnnotations>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="0" X="-100" Y="-130" ZIndex="1">
                <ContentTemplate>
                    <div style="width:100px;">
                        <img class="annotation" src="images/linear-gauge/cycling.svg"/>
                        <p class="annotationTemplate">Cycling</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="28" Y="-70" ZIndex="1">
                <ContentTemplate>
                    <div style="width:60px;">
                        <p class="annotationText">28 MPH</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
        </LinearGaugeAnnotations>
    </SfLinearGauge>
    <SfLinearGauge Orientation="Orientation.Horizontal" Height="250px">
        <LinearGaugeContainer Width="30" Offset="-90">
            <LinearGaugeContainerBorder Width="0"/>
        </LinearGaugeContainer>
        <LinearGaugeAxes>
            <LinearGaugeAxis Maximum="10">
                <LinearGaugeLine Offset="30" />
                <LinearGaugeAxisLabelStyle Offset="50" Format="{value}k" />
                <LinearGaugePointers>
                    <LinearGaugePointer Value="2" Height="10" Width="10" Placement="Placement.Near" Offset="-60" MarkerType="MarkerType.Triangle" />
                </LinearGaugePointers>
                <LinearGaugeRanges>
                    <LinearGaugeRange Start="0" End="2" StartWidth="30" EndWidth="30" Color="#30b32d" />
                </LinearGaugeRanges>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
        <LinearGaugeAnnotations>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="0" X="-100" Y="-130" ZIndex="1">
                <ContentTemplate>
                    <div style="width:100px;">
                        <img class="annotation" src="images/linear-gauge/walking.svg"/>
                        <p class="annotationTemplate">Walking</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
            <LinearGaugeAnnotation AxisIndex="0" AxisValue="2.2" Y="-65" ZIndex="1">
                <ContentTemplate>
                    <div style="width:100px;">
                        <p class="annotationText">2000 Steps</p>
                    </div>
                </ContentTemplate>
            </LinearGaugeAnnotation>
        </LinearGaugeAnnotations>
    </SfLinearGauge>
</div>
<style>
    .annotation{
        height:25px;
        width:25px;
        float:left;
        margin-left:100px;
        margin-top:10px;
    }
    .annotationTemplate{
        float:left;
        margin-left:130px;
        margin-top:-20px
    }
    .annotationText {
        font-size:15px;
        margin-left:-30px;
        margin-top:-10px;
    }
</style>
